<template>
  <div id="userFormDailog">
    <el-dialog :visible.sync="visible"
               :show-close="true"
               :width="width"
               ref="dialog"
               :title="userformDialogData.formTitle"
               :append-to-body="true"
               :close-on-click-modal="true"
               :modal="true"
               :close-on-press-escape="true"
               @open="open"
               @close="clearFormData">
      <div v-loading="loading">
        <UserFormMaking ref="userFormMaking"
                        @closeLoading="closeLoading"
                        @openLoading="openLoading"
                        :visible="visible"
                        @envent="envent"
                        :userformData="userformDialogData"></UserFormMaking>
      </div>
      <span slot="footer"
            class="form-dialog-footer">
<!--        <el-button size="mini"-->
<!--                   @click="visible = false">Cancel</el-button>-->
        <el-button size="mini"
                   v-if="userformDialogData.id && userformDialogData.expireTimestamp > new Date().getTime()"
                   @click="revokeAccess">Revoke</el-button>
        <el-button size="mini"
                   type="primary"
                   @click="add">{{ userformDialogData.id && userformDialogData.expireTimestamp > new Date().getTime() ? 'Update' : 'Grant' }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import UserFormMaking from '@/components/form-making/userFormMaking.vue'
export default {
  name: 'role-grant-access',
  components: {
    UserFormMaking
  },
  props: {
    width: String,
    userformDialogData: {
      type: Object,
      default: () => {
        return {
          isNew: true,
          formTitle: null,
          formCode: null,
          id: null
        }
      }
    }

  },
  data () {
    return {
      visible: false,
      loading: false
    }
  },
  methods: {
    envent () {
      this.$emit('envent')
    },
    open () {
      this.loading = true
      // permissions auth
    },
    clearFormData () {
      this.$refs.userFormMaking.jsonData = {}
      this.$refs.userFormMaking.resetFormMaking()
    },
    add () {
      this.$refs.userFormMaking.addOrUpdateFormData()
    },
    revokeAccess () {
      this.$refs.userFormMaking.addOrUpdateFormData('revokeAccess')
    },
    openLoading () {
      this.loading = false
    },
    closeLoading () {
      this.loading = false
    }
  }
}
</script>

<style lang="scss">
.form-item-custom .el-form-item__content{
  font-size: 20px;
  line-height: 28px;
  padding-bottom: 10px;
}
#userFormDailog {
  .el-dialog {
    max-height: 95vh !important;
  }
  .el-dialog__header {
  }
  .el-dialog__body {
    max-height: 80vh;
    min-height: 20vh;
    padding: 20px !important;
    overflow-y: scroll !important;
  }
  .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*height:600px;*/
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
  }
  .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
  }
}
</style>
